<#include "/common/layout.html">
<@header>
  	<link rel="stylesheet" href="${ctx}/plugins/bootstrap-table/bootstrap-table.min.css">
</@header>
<@body>
<div class="right_col" role="main">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
			<form class="form-inline">
				<div class="row x_title">
					<div class="col-md-6">
						<#if shiro.hasPermission("addMenu")>
		           	 		<a class="btn btn-info dialog" href="javascript:;" data-title="创建菜单" data-url="${ctx}/system/menu/add" data-width="800" data-height="650"><i class="fa fa-plus"></i> 创建菜单</a>
			            </#if>
			            <button id="expandAllBtn" type="button" class="btn btn-success">
			                <i class="fa fa-exchange" aria-hidden="true"></i>展开/折叠
			            </button>
                  	</div>
                  	<div class="col-md-6">
	                  	<div class="input-group pull-right">
			               <input type="text" name="search" value="${search!}" class="form-control" placeholder="请输入菜单名称">
			               <div class="input-group-btn">
			                 <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
			                 <a href="${ctx}/system/menu/listPage" class="btn btn-default"><i class="fa fa-refresh"></i></a>
			               </div>
			            </div>
                  	</div>
        		</div>
         	</form>
			<div class="x_content">
	            <table id="bootstrap-tree-table" class="table table-striped table-bordered table-hover"></table>
			</div>
        </div>
      </div>
    </div>
</div>
</@body>
<@footer>
<script src="${ctx}/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx}/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${ctx}/plugins/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
<script src="${ctx}/plugins/bootstrap-table/extensions/tree/bootstrap-table-tree.js"></script>
<script>
	var editFlag = '${shiro.hasPermission("editMenu")}';
	var deleteFlag = '${shiro.hasPermission("deleteMenu")}';
	var table = $('#bootstrap-tree-table').bootstrapTreeTable({
        code: "id",                                 		// 用于设置父子关系
        parentCode: "pid",                     				// 用于设置父子关系
        uniqueId: "id",
        type: 'post',                                       // 请求方式（*）
        url: '${ctx}/system/menu/listMenu',                       // 请求后台的URL（*）
        ajaxParams: {},                     				// 请求数据的ajax的data属性
        rootIdValue: null,                   				// 设置指定根节点id值
        height: 0,                             				// 表格树的高度
        expandColumn: 1,                 					// 在哪一列上面显示展开按钮
        striped: false,                           			// 是否显示行间隔色
        bordered: false,                         			// 是否显示边框
        //toolbar: '#toolbar',                     			// 指定工作栏
        showSearch: false,                     				// 是否显示检索信息
        showRefresh: false,                   				// 是否显示刷新按钮
        showColumns: false,                   				// 是否显示隐藏某列下拉框
        expandAll: true,                       				// 是否全部展开
        expandFirst: true,                   				// 是否默认第一级展开--expandAll为false时生效
        columns: [
			{
	            field: 'selectItem',
	            radio: true
			},
			{
				field: 'menuName',
				title: '菜单名称',
				align: 'left',
				formatter: function(value, row, index) {
					if (row.icon == null || row.icon == "") {
						return row.menuName;
					} else {
						return '<span class="nav-label">' + row.menuName + '</span>';
					}
				}
			},
			{
				field: 'url',
				title: '访问地址',
				align: 'left',
				formatter: function(value, row, index) {
					if (row.url == null || row.url == "" ) {
						return '--';
					} else {
						return row.url;
					}
				}
			},
			{
				field: 'deep',
				title: '菜单深度',
				align: 'left',
			},
			{
				field: 'resource',
				title: '权限标识',
				align: 'left',
				formatter: function(value, row, index) {
					if (row.resource == null || row.resource == "" ) {
						return '--';
					} else {
						return row.resource;
					}
				}
			},
			{
				field: 'sort',
				title: '菜单排序',
				align: 'left',
			},
	        {
	    		field: 'deep',
	    		title: '菜单类型',
	    		align: 'left',
	    		formatter:function(value, row, index){
	    			switch (row.deep){
	    				case 1 : return '<span class="label label-primary">目录</span>';
	    				case 2 : return '<span class="label label-success">菜单</span>';
	    				case 3 : return '<span class="label label-warning">按钮</span>';
	    			}
	    		}
	    	},
	        {
	            align: "left",
	            title: '操作',
	            formatter: function(value, row, index) {
	            	var actions = [];
	            	if(editFlag == 'true') {
						actions.push('<a class="btn btn-info btn-xs dialog" data-title="编辑菜单" data-url="${ctx}/system/menu/edit/'+ row.id +'" data-width="800" data-height="650"><i class="fa fa-pencil"></i>编辑</a>');
	            	}
	            	if(deleteFlag == 'true') {
						actions.push('<a class="btn btn-danger btn-xs" data-tiggle="ajax" data-submit-url="${ctx}/system/menu/delete/'+ row.id +'" data-confirm="您确定要删除该条记录吗?"><i class="fa fa-trash-o"></i>删除</a>');
	            	}
	    			return actions.join('');
	            }
	        }
        ],
        responseHandler: responseHandler,       // 在加载服务器发送来的数据之前处理函数
        onLoadSuccess: onLoadSuccess            // 当所有数据被加载时触发处理函数
    })
	// 请求获取数据后处理回调函数，校验异常状态提醒
    function responseHandler(res) {
		return res;
    }
    // 当所有数据被加载时触发
    function onLoadSuccess(data) {
    }
	// tree表格树 展开/折叠
    var expandFlag;
    $("#expandAllBtn").click(function() {
        var dataExpand = isEmpty(table.expandAll) ? true : table.expandAll;
        expandFlag = isEmpty(expandFlag) ? dataExpand : expandFlag;
        if (!expandFlag) {
        	$('#bootstrap-tree-table').bootstrapTreeTable('expandAll');
        } else {
        	$('#bootstrap-tree-table').bootstrapTreeTable('collapseAll');
        }
        expandFlag = expandFlag ? false: true;
    })

	// 删除单个记录
	$("body").delegate("*[data-tiggle='ajax']", "click", function() {
		var dataUrl = $(this).attr("data-submit-url");
		var dataConfirm = $(this).attr("data-confirm");
		$.confirm({
			type: 'red',
			closeIcon: true,
		    title: '警告',
		    content: dataConfirm ? dataConfirm : '确认操作?',
		    buttons: {
		        '确认': {
		            btnClass: 'btn-blue',
		            action: function(){
		            	$.post(dataUrl,{},function(data){
							if(data.code==200){
								window.parent.location.reload();
								layer.msg(data.msg, { icon : 1 });
							}else{
								$.alert({
								    title: '提示',
								    content: data.msg,
								    buttons:{"好的":{ btnClass: 'btn-blue'}}
								});
							}
						});
		            }
		        },
		        '取消':{}
		    }
		});

	});
</script>
</@footer>
